<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/include/header.jsp"%>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>${basePageTitle}</title>
<link href="${baseURL}/css/um/versionInfo.css" rel="stylesheet" type="text/css" />	
<script type="text/javascript">
head = document.getElementsByTagName("head")[0];
cssLink = document.createElement("link");
cssLink.rel = cssLink.rev = "stylesheet";
cssLink.type = "text/css";
cssLink.media = "screen";
head.appendChild(cssLink);
if ($.browser.msie) {
	(function() {
		var e = "article,aside,details,figure,footer,header,nav,section"
				.split(','), i = e.length;
		while (i--) {
			document.createElement(e[i]);
		}
	})();
	cssLink.href = "${baseURL}/<s:text name ="home.css_ie"/>";
} else {
	cssLink.href = "${baseURL}/<s:text name ="home.css"/>";
}
	$(function(){
		loadData();
	});
	function loadData(){
		$.ajax({
			type: "post",
			url: "${baseURL}/versioninfo/show.action",
			dataType: "json",
			success: function(result){
				var titl2=document.getElementById("signin.titleT2").value;
				var updateContent=document.getElementById("indexP.updateData").value;
				if(result.newPublish){
					$(".versionupdate").find("span").html('<img border=0 src="${baseURL}/images/newversion.png" />');
				}

						var astr = "";
						for ( var j = 0; j < result.versionDetailInfoVOs.length; j++) {
							var detail = result.versionDetailInfoVOs[j];
							astr += "<li style='line-height:25px;list-style:none;'><font style='color:#878787;'>"
									+ detail.seq_Num
									+ "、"
									+ detail.content
									+ "</font></li>";
						}
						$(".version_num").html(titl2 +" "+result.versionNumber+" "+ updateContent+"("+ result.publishTime_str + ")：");
						$(".content").html(astr);
					}
				});
	}
</script>
</head>
<body>
<form>
	<input type="hidden" id="signin.titleT2" value="<s:text name="signin.titleT2"/>"/>
	<input type="hidden" id="indexP.updateData" value="<s:text name="indexP.updateData"/>"/>
</form>
	<header>
		<%@ include file="/include/start/start_header.jsp"%>
	</header>
	<section class="slide">
	<div class="slide_list" id="mac_slide">
		<a title="<s:text name="indexP.exp2.0"/>" class="<s:text name ="home.download_bt"/>"
			href="${baseURL}/experience.jsp" target="_blank"><%-- <s:text name="indexP.exp2.0"/> --%></a>
		<ul>
			<li style="z-index: 1; opacity: 1;"><img
				src="${baseURL}/<s:text name="home.banner_1" />"></li>
			<li style="z-index: 0; opacity: 1;"><img
				src="${baseURL}/<s:text name="home.banner_2" />"></li>
			<li style="z-index: 0; opacity: 1;"><img
				src="${baseURL}/<s:text name="home.banner_3" />"></li>
		</ul>
		<strong> <span class="current">1</span> <span>2</span> <span>3</span>
		</strong>
	</div>
	</section>
	<section id="my_music">
	<div>
		<article>
		<h3><s:text name="indexP.CoreInforPage"></s:text></h3>
		<p><s:text name="indexP.careLineInfo"/></p>
		<p><s:text name="indexP.SYSPage"/></p>
		</article>
		<figure> <strong></strong></figure>
		<figure></figure>
		<span></span><span></span><span></span><span></span><span></span><span></span>
	</div>
	</section>
	<section id="ranks">
	<div>
		<article>
		<h3><s:text name="indexP.careLineInfo"/></h3>
		<p><s:text name="indexP.priceDiscount"/></p>
		<p><s:text name="indexP.priceCh"/></p>
		</article>
		<figure> <span></span></figure>
	</div>
	</section>
	<section id="full_screen">
	<div>
		<article>
		<h3><s:text name="indexP.monitorDataPush"></s:text></h3>
		<p><s:text name="indexP.cabinChange"></s:text></p>
		<p><s:text name="indexP.lowestPrice"></s:text></p>
		<p><s:text name="indexP.highestPrice"></s:text></p>
		<p><s:text name="indexP.eachClass"></s:text></p>
		</article>
		<figure></figure>
		<figure></figure>
	</div>
	</section>
	<section id="auto_download">
	<div>
		<article>
		<h3><s:text name="indexP.Mwarning"></s:text></h3>
		<p><s:text name="indexP.lowestPrice"></s:text></p>
		<p><s:text name="indexP.cabinChange"></s:text></p>
		<p><s:text name="indexP.contrastC"></s:text></p>
		<p><s:text name="indexP.priceC"></s:text></p>
		<p><s:text name="indexP.keyInfo"></s:text></p>
		</article>
		<figure> <span></span></figure>
	</div>
	</section>
	<section id="retina">
	<div>
		<article>
		<h3><s:text name="indexP.muAnalysis"></s:text></h3>
		<p><s:text name="indexP.FRdimension"></s:text></p>
		<p><s:text name="indexP.FHtrend"></s:text></p>
		<p><s:text name="indexP.conpareAC"></s:text></p>
		</article>
		<figure> <strong></strong></figure>
		<figure> <span></span></figure>
		<span></span><span></span><span></span><span></span><span></span><span></span>
	</div>
	</section>

	<!-- 此div用作版本显示 -->
	<div name="version" id="version"
		style="width: 80%; height: auto; margin: 0px auto; overflow: hidden; 
		position: relative; background: url(../../images/new_main_body.png) repeat-x; 
		text-align: left; font-size: 14px; padding: 5px 10px 10px 30px; border-right-color: #cdd1d5;
		 border-color: #cdd1d5; border-width: 1px; border-style: solid;box-shadow:0px 0px 10px rgba(0,0,0,0.4);">
		<span class="version_num" style="font-size: 16px; color: #5f5f5f;"></span><span
			style="float: right;"><a
			href="${baseURL}/versioninfo/all.action"
			style="text-decoration: none; color: #5f5f5f;" target="_blank">More</a></span>
		<div style="padding: 2px 0px 2px 0px;"></div>
		<ul class="content"></ul>
	</div>
	<!-- 页脚 -->
	<footer>
	<%@ include file="/include/start/start_footer.jsp"%>
	</footer>
	<script type="text/javascript">
		(function() {
			if (!Function.prototype.bind) {
				Function.prototype.bind = function(obj) {
					var owner = this, args = Array.prototype.slice
							.call(arguments), callobj = Array.prototype.shift
							.call(args);
					return function(e) {
						e = e || top.window.event || window.event;
						owner.apply(callobj, args.concat([ e ]));
					};
				};
			}
		})();
		var glume = function(id) {
			this.ctn = document.getElementById(id);
			this.adLis = null;
			this.btns = null;
			this.animStep = 0.1;//动画速度0.1～0.9
			this.switchSpeed = 4;//自动播放间隔(s)
			this.defOpacity = 1;
			this.tmpOpacity = 1;
			this.crtIndex = 0;
			this.crtLi = null;
			this.adLength = 0;
			this.timerAnim = null;
			this.timerSwitch = null;
			this.init();
		};
		glume.prototype = {
			fnAnim : function(toIndex) {
				if (this.timerAnim) {
					window.clearTimeout(this.timerAnim);
				}
				if (this.tmpOpacity <= 0) {
					this.crtLi.style.opacity = this.tmpOpacity = this.defOpacity;
					this.crtLi.style.filter = 'Alpha(Opacity='
							+ this.defOpacity * 100 + ')';
					this.crtLi.style.zIndex = 0;
					this.crtIndex = toIndex;
					return;
				}
				this.crtLi.style.opacity = this.tmpOpacity = this.tmpOpacity
						- this.animStep;
				this.crtLi.style.filter = 'Alpha(Opacity=' + this.tmpOpacity
						* 100 + ')';
				this.timerAnim = window.setTimeout(this.fnAnim.bind(this,
						toIndex), 50);
			},
			fnNextIndex : function() {
				return (this.crtIndex >= this.adLength - 1) ? 0
						: this.crtIndex + 1;
			},
			fnSwitch : function(toIndex) {
				if (this.crtIndex == toIndex) {
					return;
				}
				this.crtLi = this.adLis[this.crtIndex];
				for ( var i = 0; i < this.adLength; i++) {
					this.adLis[i].style.zIndex = 0;
				}
				this.crtLi.style.zIndex = 2;
				this.adLis[toIndex].style.zIndex = 1;
				for ( var i = 0; i < this.adLength; i++) {
					this.btns[i].className = '';
				}
				this.btns[toIndex].className = 'current';
				this.fnAnim(toIndex);
			},
			fnAutoPlay : function() {
				this.fnSwitch(this.fnNextIndex());
			},
			fnPlay : function() {
				this.timerSwitch = window.setInterval(this.fnAutoPlay
						.bind(this), this.switchSpeed * 1000);
			},
			fnStopPlay : function() {
				window.clearTimeout(this.timerSwitch);
			},
			init : function() {
				this.adLis = this.ctn.getElementsByTagName('li');
				this.btns = this.ctn.getElementsByTagName('strong')[0]
						.getElementsByTagName('span');
				this.adLength = this.adLis.length;
				for ( var i = 0, l = this.btns.length; i < l; i++) {
					with ({
						i : i
					}) {
						this.btns[i].index = i;
						this.btns[i].onclick = this.fnSwitch.bind(this, i);
						this.btns[i].onclick = this.fnSwitch.bind(this, i);
					}
				}
				this.adLis[this.crtIndex].style.zIndex = 2;
				this.fnPlay();
				this.ctn.onmouseover = this.fnStopPlay.bind(this);
				this.ctn.onmouseout = this.fnPlay.bind(this);
			}
		};
		var player1 = new glume('mac_slide');

		(function(win) {
			if ($.browser.msie) {
				return;
			}
			var utility = {
				animating : true,
				curScrollTop : 0,
				_sectionIndex : 0,
				dragScroll : true, //拖动滚动条加载
				getObjInView : function(obj, total) {
					var _container = $.browser.mozilla ? $("html,body")
							: $(document.body), _height = $(obj).height(), _scrollTop = _container
							.scrollTop()
							- _height, _totalTop = $(win).height()
							+ _container.scrollTop(), _criticality = $(obj)
							.offset().top, _cache1, _cache2;
					if (total) {
						if ((_cache1 = _criticality - _scrollTop) > 0
								&& (_cache2 = _totalTop - _criticality) > 0) {
							if (_cache1 / _height > 0.99
									&& _cache2 / _height > 0.99) {
								return true;
							}
						}
						return false;
					}
					if ((_cache1 = _criticality - _scrollTop) > 0
							&& (_cache2 = _totalTop - _criticality) > 0) {
						if (_cache1 / _height > 0.85
								&& _cache2 / _height > 0.85) {
							return true;
						}
					}
					return false;
				},

				testSectionInView : function(total) {
					var that = this;
					$.each($("section"), function(i) {
						var _that = $(this);
						if (that.getObjInView(_that, total)) {
							if (!_that.hasClass("animation")) {
								_that.addClass("animation");
							}
						}
					});
				},

				scrollFunc : function(e) {
					utility.dragScroll = false;
					if (utility.animating) {
						utility.animating = false;
						e = e || window.event;
						var driection = false;//设置滚动方向
						if (e.wheelDelta) {//IE/Opera/Chrome
							if (e.wheelDelta < 0) {
								direction = false;
							} else if (e.wheelDelta > 0) {
								driection = true;
							}
							utility.animate(driection);
						} else if (e.detail) {//Firefox
							if (e.detail > 0) {
								direction = false;
							} else if (e.detail < 0) {
								driection = true;
							}
							utility.animate(driection);
						}
						utility.dragScroll = true;
					} else {
						if (e && e.preventDefault) {
							e.preventDefault();
						} else {
							window.event.returnValue = false;
						}
						utility.dragScroll = true;
						return false;
					}
				},

				setIndex : function(direction) {
					var _cacheArr = [], that = this;
					$.each($("section"), function(i) {
						var _that = $(this);
						if (that.getObjInView(_that)) {
							_cacheArr.push(i);
						}
					});
					return direction ? _cacheArr[0]
							: _cacheArr[_cacheArr.length - 1];
				},

				animate : function(up) {
					this._sectionIndex = this.setIndex(up);
					if (!(up && this._sectionIndex == 0)
							&& !(!up && this._sectionIndex == 6)) {
						this._sectionIndex += up ? -1 : 1;
					}

					var _that = this, _scrollDis;
					if (this._sectionIndex == 0) {
						_scrollDis = 0;
					} else {
						_scrollDis = $(
								document.getElementsByTagName("section")[this._sectionIndex])
								.offset().top;
					}

					$("html,body").animate({
						scrollTop : _scrollDis
					}, 1000, 'swing', function() {
						_that.animating = true;
						_that.curScrollTop = $(document.body).scrollTop();
						utility.testSectionInView();
					});

				}
			};

			if (document.addEventListener) {
				document.addEventListener('DOMMouseScroll', utility.scrollFunc,
						true);
			}

			window.onmousewheel = document.onmousewheel = utility.scrollFunc;//IE/Opera/Chrome/Safari

			//监听拖动滚动条事件
			document.addEventListener("scroll", function(e) {
				if (!utility.dragScroll) {
					return;
				}
				utility.testSectionInView();
				utility.dragScroll = true;
			}, false);

			utility.testSectionInView(true);
		})(this);
	</script>
</body>
</html>